<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>

        <h2>学生姓名：{{studentName}}</h2>
        <hr>
    </div>
</template>

<script>
    // 引入消息的发布订阅插件
    import pubsub from 'pubsub-js';

    export default {
        name: 'School',
        data() {
            return {
                name: '尚硅谷',
                address: '北京市昌平区',
                studentName: ''
            }
        },
        methods: {
            demo(msgName, data) {
                console.log(this);// 使用箭头函数的话，就可以指向Vue对象实例了
                console.log('有人发布了hello 消息，hello消息的回调函数子项了', msgName, data);
                this.studentName = data;
            }
        },
        mounted() {
            // console.log('School',this)
            // 使用消息总线实现
            /* this.$bus.$on('hello',(data)=>{
                console.log('我是School组件，收到了数据',data)
            }) */

            // // 使用发布订阅技术实现
            // this.pubId = pubsub.subscribe('hello', (msgName, data) => {
            //     console.log(this);// 使用箭头函数的话，就可以指向Vue对象实例了
            //     console.log('有人发布了hello 消息，hello消息的回调函数子项了', msgName, data);
            // });

            // 使用上面定义的函数，不使用箭头函数，同样也可以拿到对应的回调指向
            this.pubId = pubsub.subscribe('hello', this.demo);// 此处千万不能加上括号，否则就会直接调用上面的方法了
        },
        beforeDestroy() {
            // 使用消息总线实现
            // this.$bus.$off('hello')

            // 使用消息的发布订阅实现
            pubsub.unsubscribe(this.pubId);
        },
    }
</script>

<style scoped>
    .school {
        background-color: rgb(181, 33, 33);
        padding: 5px;
    }
</style>